<template>
  <div>
    <search-com @keyword="search"></search-com>
    <div class="zuijin">
      <p>
            <span>
                <img src="/static/img/zuijin.png" alt=""><span>最近搜索</span>
            </span>
        <span class="qingkong" @click="cancle">
                清空记录
            </span>
      </p>
      <ul>
        <a v-for="(item,index) in nearest" :key="index" :href="'../searchList/main?keyword='+item">{{item}}</a>
      </ul>
    </div>
    <div class="remen">
      <p>
        <span>
           <img src="/static/img/remen.png" alt=""><span>热门搜索</span>
        </span>
      </p>
      <ul>
        <a @click="chooseTitle(item.title)" v-for="(item,index) in data.list" :key="index" :href="'../searchList/main?keyword='+item.title">{{item.title}}</a>
      </ul>
    </div>
  </div>
</template>

<script>
  import request from '@/actions/request.js'
  import searchCom from "@/components/search/search.vue";
  export default {
    name: "Search",
    components: {
      searchCom,
    },
    data() {
      return {
        data:{},
        searchContent:'',
        listData:{},
        nearest:[],
      }
    },
    watch:{
      nearest(newVal,oldVal){
      }
    },
    onShow(){

    },
    methods:{
      chooseTitle(title){
        let isAdd=true;
        this.nearest.forEach((v,i)=>{
          if (v == title){
            isAdd=false;
          } ;
        });
        if (isAdd){
          this.nearest.unshift(title)
        };
        if(this.nearest.length>10){
          this.nearest=this.nearest.slice(0,10);
        }
        wx.setStorageSync("searchGoods",JSON.stringify(this.nearest))
      },
      search(keyword){
        this.searchContent=keyword;
        // request.searchGoods(this);
        wx.navigateTo({
          url: '../searchList/main?keyword='+this.searchContent
        });
        let isAdd=true;
        this.nearest.forEach((v,i)=>{
          if (v == keyword){
            isAdd=false;
          } ;
        });
        if (isAdd){
          this.nearest.unshift(keyword)
        };
        if(this.nearest.length>10){
          this.nearest=this.nearest.slice(0,10);
        }
        wx.setStorageSync("searchGoods",JSON.stringify(this.nearest))
      },
      cancle(){
        wx.setStorageSync('searchGoods','');
        this.nearest=[];
      }
    },
    mounted() {
      request.hotSearchTopTen('api/Home/hotSearchTopTen','post',{},{},false,this);
      if(wx.getStorageSync('searchGoods')){
        this.nearest=JSON.parse(wx.getStorageSync('searchGoods'));
      }
    },
  }
</script>

<style scoped lang="scss">
  .zuijin,.remen{
    padding: 0 4vw;
    margin-top: 15px;
    img{
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-right: 7px;
    }
    span{
      font-size: 14px;
      color: #333333;
      vertical-align: middle;
    }
    .qingkong{
      float:right;
      color:#FF4C50
    }
    ul{
      margin: 10px 0px;
      a{
        color: #666666;
        border-radius: 50px;
        border: 1px solid #666666;
        line-height: 24px;
        padding: 0 13px;
        display: inline-block;
        margin: 5px;
        font-size: 15px;
      }

    }
  }

</style>
